<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>props的简写方式</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
		<!-- 引入prop-types，用于限制props -->
		<script type="text/javascript" src="../js/prop-types.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="root"></div>
		<div id="root2"></div>

		<script type="text/babel">
			//定义一个Person组件
			function Person (props){
				const {name,age,sex} = props
				return (
					<ul>
						<li>姓名：{name}</li>	
						<li>年龄：{age+1}</li>	
						<li>性别：{sex}</li>	
					</ul>
				)
			}
				Person.propTypes = {
					name:PropTypes.string.isRequired,
					age:PropTypes.number,
					sex:PropTypes.string
				}
				//设置prop的默认值
				Person.defaultProps = {
					sex:'不男不女'
				}

			//准备好一个人的数据
			let p = {
				name:'老刘',
				age:18,
				sex:'男',
			}
			//渲染组件到页面
			ReactDOM.render(<Person {...p}/>,document.getElementById('root'))
			ReactDOM.render(<Person name="佩奇" age="17" sex="女" />,document.getElementById('root2'))
		</script>
	</body>
</html>